<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
		<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery-3.6.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.top-panel {
				border: 1px solid #eceff9;
				border-radius: 5px;
				text-align: center;
			}
			.top-panel > .layui-card-body{
				height: 145px;
			}
			.top-panel > .layui-card-header{
				height: 50px;
				font-size: 20px;
			}
			.top-panel-number{
				line-height:145px;
				font-size: 30px;
				border-right:1px solid #eceff9;
			}
			.top-panel-tips{
				line-height:145px;
				font-size: 12px
			}
		</style>
	<script type="text/javascript">
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
			elem: '#test1'
			,width: '97%'    //设置容器宽度
			,height:'97%'
			,arrow: 'none'//始终显示箭头
			,autoplay: 'true',
			//,anim: 'updown' //切换动画方式
		  });
		});

		$.ajax({
			type: 'get',
			url: window.location.protocol + '//' + window.location.host + '/getZpZixunList',
			success: function (data) {
				//while (data.size)
				var count = 1;
				for (let i = (data.length - 1); i >= 0; i--) {
					var zid = data[i].id;
					$('#zp_ul').append("<li style='padding-top:10px; font-size: 15px; line-height: 35px;color: #999999' layui-filter>" + "<span class='layui-col-md9 layui-col-xs7'>" +
							"<i class='layui-icon layui-icon-right'></i>" + "&nbsp;<a href='javascript:;' style='color: #999999' " +
							// "href='/welcomezixunDetail?id="
							// + zid + "'" +
							"onclick='toZixunDetail(" + zid + ")'" +
							">" + data[i].title + "</a></span>" +
							"<span class='layui-col-md3 layui-col-xs5'>" + data[i].time + "</span></li>");
					count++;
					if (count === 9)
						break;
				}
			}
		});
		function toZixunDetail(id){
			var index = layer.open({
				title:false,
				type: 2,
				shade: 0.2,
				maxmin: false,
				shadeClose: true,
				area: ['700px', '600px'],
				content: '/toZixunDetail?id=' + id,
			});
		}

	</script>
	</head>

	<body style="background-color: #f6f6f6">
	<!--轮播图-->
	<div class="layui-row layui-col-space5" style="margin-top: 20px;color: #999999">
		<div class="layui-col-md8 layui-col-xs12" >
			<div class="layui-panel" style="width: 95%;margin-left: 2rem">
				<!--轮播图-->
				<div class="layui-fluid " style="width: 100%; height: 29rem; margin-top: 15px">
					<div class="layui-carousel" id="test1">
					  <div carousel-item>
						  <div><a href=""><img src="img/轮播1.jpg" style="width: 100%; height:auto;" /></a></div>
						  <div><a href=""><img src="img/轮播2.png" style="width: 100%; height:auto;" /></a></div>
						  <div><a href=""><img src="img/轮播3.png" style="width: 100%; height:auto;" /></a></div>
					  </div>
					</div>
					<!-- 条目中可以是任意内容，如：<img src=""> -->
				</div>
			</div>
			<div class="layui-panel" style="width: 95%;margin-left: 2rem;margin-top: 2rem">
				<div class="layui-row layui-col-space15" >
					<div class="layui-col-xs12 layui-col-md6">
						<div class="layui-card top-panel">
							<div class="layui-card-header">今日新增申请数量</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space5">
									<div class="layui-col-xs9 layui-col-md9 top-panel-number" th:text="*{todayApplication}">
									</div>
									<div class="layui-col-xs3 layui-col-md3 top-panel-tips">
										<span th:if="${applicationTrend ge 0}">比昨天 <a style="color: #1aa094" th:text="*{'▲'+applicationTrend}"></a></span><br>
										<span th:if="${applicationTrend lt 0}">比昨天 <a style="color: #bd3004" th:text="*{'▼'+applicationTrend}"></a></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs12 layui-col-md6">
						<div class="layui-card top-panel">
							<div class="layui-card-header">待审核申请信息数量</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space5">
									<div class="layui-col-xs9 layui-col-md9 top-panel-number" id="nowApply">
									</div>
									<div class="layui-col-xs3 layui-col-md3 top-panel-tips">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			</div>

		<!-- 内容主体区域 -->
		<div class="layui-col-md4 layui-col-xs12">
			<div class="layui-panel" style="padding: 5px; width: 90%;height: 45rem">
				<div class="layui-card-header" style="color: #243346">
					<span><i class="layui-icon" style="font-size: 20px;color: #007DDB">&#xe609;</i></span>
					<span style="font-size: 20px">我的公告</span>
				</div>
				<div class="layui-card-body">
					<div style="overflow-y: auto;">
						<ul style="height: 380px">
							<li id="zp_ul"></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</body>

	<script src="js/nav.js"></script>

	<script>
		$(document).ready(function () {
			fresh();
		});
		function fresh() {
			$.ajax({
				type: 'get',
				url: window.location.protocol + '//' + window.location.host + '/getNowApply',
				success: function (data) {
					document.getElementById('nowApply').innerText=data;
				}
			}),
					setTimeout("fresh()", 2000);
		}
	</script>
</html>
